import React, { Component } from 'react'
import '../src/css/style.css'

export default class todo extends Component {
  state={
    num:0,
    arr:[
      {
        title:'标题1',
        content:'内容1'
      },
      {
        title:'标题2',
        content:'内容2'
      },
      {
        title:'标题3',
        content:'内容3'
      },
    ]
  }
  render() {
    return (
      <div>
        {
          this.state.arr.map((el,index)=>{
             return(
               <button
               onClick={()=>{this.onchange(index)}}
               className={this.state.num ===index ? "active" : ''}
                key={index}>{el.title} </button>
             )
          })
        }
        {
          this.state.arr.map((el,index)=>{
            if(this.state.num===index){
              return (
                <div 
                key={index}
                className="content">
                  {el.content}
                </div>
              )
            }
            else{
              return " "
            }
            
          })
        }
      </div>
    )
  }
  onchange= (index) =>{
    
    this.setState((a,b)=>{

      return{
        num : index
      }
    })
  }
}
